import React from "react";
// import Login from './login';
export default class App extends React.Component {
  constructor(porps) {
    super(porps)
    this.state = {
      layoutState: 1, // 控制显示哪一个组件，1:login,2:register,3:忘记 password
    }
  }
  updateHandler(v) {
    console.log(v)
    this.setState({
      layoutState: v,
    })
  }
  getSubComponent() {
    if (this.state.layoutState === 1) {
      // return <Login layoutState />  //  默认时boolean类型的true
      return <Login layoutState={this.state.layoutState} updateHandler={this.updateHandler.bind(this)} />

    } else if (this.state.layoutState === 2) {
      return <Register layoutState={this.state.layoutState} updateHandler={this.updateHandler.bind(this)} />
    } else if (this.state.layoutState === 3) {
      return <Password layoutState={this.state.layoutState} updateHandler={this.updateHandler.bind(this)} />
    }
  }
  render() {

    return (
      // this.state.layoutState === 1 ? <Login /> : (this.state.layoutState === 2 ? <Register /> : <Password />)
      <>
        <p>{this.state.layoutState}</p>
        {this.getSubComponent()}

      </>
    )
  }
}

export class Login extends React.Component {
  state = {
    account: 'wqw',
    password: '123',
  }
  constructor() {
    super();
    this.goRegister = this.goRegister.bind(this)
    this.editPassword = this.editPassword.bind(this)
  }
  changeAccount() { }
  changePassword() { }

  goRegister(e) {
    this.props.updateHandler(2)
  }
  editPassword(e) {
    this.props.updateHandler(3)
  }
  render() {
    console.log(this.props)
    let { layoutState } = this.props;
    return (
      <div>
        <h1>login</h1>
        <form>
          Account: <input type="text" defaultValue={this.state.account} onChange={this.changeAccount} />
          <br />
          PassWord: <input type="password" defaultValue={this.state.password} onChange={this.changePassword} />
          <br />
          <button type='button' onClick={this.submitHandler}>登录</button>

        </form>
        <div>
          <span onClick={() => {
            this.goRegister();
          }}>注册 | </span>

          <span onClick={() => {
            this.editPassword();
          }}>忘记密码</span>
        </div >
      </div>
    )
  }
}

export class Register extends React.Component {
  render() {
    const { layoutState } = this.props;
    return (
      <div>
        {/* <h1>Register -- {layoutState}</h1> */}
        <h1>Register -- {this.props.layoutState}</h1>

        <div>
          <span onClick={() => {
            this.props.updateHandler(1);
          }}>登录 | </span>

          <span onClick={() => {
            this.props.updateHandler(3);
          }}>忘记密码</span>
        </div>
      </div>
    )
  }
}

export class Password extends React.Component {
  render() {
    let { updateHandler } = this.props;
    return (
      <div>
        <h1>Password</h1>
        <div>
          <span onClick={() => {
            updateHandler(1); // 只能通过props里面callback的调用，并传参数，让父组件的函数去修改props中对应得状态。
            // this.props.layoutState = 3; // 不能直接修改 props里面的属性
          }}>登录 | </span>

          <span onClick={() => {
            updateHandler(2);
          }}>注册</span>
        </div>
      </div>
    )
  }
}